import {
  PluginEntry,
  CardEntry,
  PluginOptions,
  NodeInterface,
  RangeInterface,
  EngineInterface,
} from "@aomao/engine";
//引入插件 begin
import Redo from "@aomao/plugin-redo";
import Undo from "@aomao/plugin-undo";
import Bold from "@aomao/plugin-bold";
import Code from "@aomao/plugin-code";
import Backcolor from "@aomao/plugin-backcolor";
import Fontcolor from "@aomao/plugin-fontcolor";
import Fontsize from "@aomao/plugin-fontsize";
import Italic from "@aomao/plugin-italic";
import Underline from "@aomao/plugin-underline";
import Hr, { HrComponent } from "@aomao/plugin-hr";
import Tasklist, { CheckboxComponent } from "@aomao/plugin-tasklist";
import Orderedlist from "@aomao/plugin-orderedlist";
import Unorderedlist from "@aomao/plugin-unorderedlist";
import Indent from "@aomao/plugin-indent";
import Heading from "@aomao/plugin-heading";
import Strikethrough from "@aomao/plugin-strikethrough";
import Sub from "@aomao/plugin-sub";
import Sup from "@aomao/plugin-sup";
import Alignment from "@aomao/plugin-alignment";
import Mark from "@aomao/plugin-mark";
import Quote from "@aomao/plugin-quote";
import PaintFormat from "@aomao/plugin-paintformat";
import RemoveFormat from "@aomao/plugin-removeformat";
import SelectAll from "@aomao/plugin-selectall";
import Link from "@aomao/plugin-link-vue";
import Codeblock, { CodeBlockComponent } from "@aomao/plugin-codeblock-vue";
// ImageUploader
import Image, { ImageComponent } from "@aomao/plugin-image";
import Table, { TableComponent } from "@aomao/plugin-table";
// VideoUploader
import Video, { VideoComponent } from "@aomao/plugin-video";
import Math, { MathComponent } from "@aomao/plugin-math";
import Fontfamily from "@aomao/plugin-fontfamily";
import Status, { StatusComponent } from "@aomao/plugin-status";
import LineHeight from "@aomao/plugin-line-height";
import Mention, { MentionComponent } from "@aomao/plugin-mention";
import MarkRange from "@aomao/plugin-mark-range";
import CustomImageUploader from './CustomImageUploader.ts'
import CustomVideoUploader from './CustomVideoUploader.ts'
// import File , { FileComponent , FileUploader } from '@aomao/plugin-file';
import {
  ToolbarPlugin,
  ToolbarComponent,
  fontFamilyDefaultData,
} from "@aomao/toolbar-vue";

// import { Empty } from "ant-design-vue";
import { createApp } from "vue";
import Loading from "./Loading.vue";
import MentionPopover from "./Mention.vue";
import { getStore } from "@/utils/store";
let engine: EngineInterface | null = null;

export const plugins: Array<PluginEntry> = [
    Redo,
    Undo,
    Bold,
    Code,
    Backcolor,
    Fontcolor,
    Fontsize,
    Italic,
    Underline,
    Hr,
    Tasklist,
    Orderedlist,
    Unorderedlist,
    Indent,
    Heading,
    Strikethrough,
    Sub,
    Sup,
    Alignment,
    Mark,
    Quote,
    PaintFormat,
    RemoveFormat,
    SelectAll,
    Link,
    Codeblock,
    Image,
    CustomImageUploader,
    Table,
    Video,
    CustomVideoUploader,
    // File,
    // FileUploader,
    Math,
    ToolbarPlugin,
    Fontfamily,
    Status,
    LineHeight,
    Mention,
    MarkRange,
];

export const cards: Array<CardEntry> = [
    HrComponent,
    // FileComponent,
    CheckboxComponent,
    CodeBlockComponent,
    ImageComponent,
    TableComponent,
    VideoComponent,
    MathComponent,
    ToolbarComponent,
    StatusComponent,
    MentionComponent,
];
export const pluginConfig: { [key: string]: PluginOptions } = {
  // [FileUploader.pluginName]:{
  //   action: `/mgr/jvs-auth/upload/jvs-public`,
  //   headers: {
  //     Authorization: 'Bearer ' + getStore({name:'access_token'})
  //   },
  //   data:{
  //     module:`/jvs-knowledge-ui/aomaoImage`
  //   },
  //   limitSize: 1024 * 1024 * 20,
  //   parse: (response) => {
  //     return {
  //         data: {
  //           url: 'https://knowledge.bctools.cn'+response.data.fileLink,
  //           preview: 'https://knowledge.bctools.cn'+response.data.fileLink,
  //           download: 'https://knowledge.bctools.cn'+response.data.fileLink,
  //         },
  //         result: response.code == 0
  //     }
  //   }  
  // },
  // 图片配置解析
  [Image.pluginName]:{
    onBeforeRender: (status: string, url:any) => {
      if(Object.prototype.toString.call(url)=='[object Object]'){
        return url?.url || url?.preview || url?.download
      }else{
        // if (url.startsWith("data:image/")) return url;
        return url
      }
    },
  },
  // 配置@人员
  [Mention.pluginName]: {
    action: `/mgr/document/dcLibrary/query/member/100fb9dbb9a25ebb4b3bc50460fb4413`,
    headers: {
      Authorization: 'Bearer ' + getStore({name:'access_token'})
    },
    onLoading: (root: NodeInterface) => {
      const vm = createApp(Loading);
      vm.mount(root.get<HTMLElement>()!);
    },
    onEmpty: (root: NodeInterface) => {
      // const vm = createApp(Empty);
      // vm.mount(root.get<HTMLElement>()!);
    },
    onClick: (
      root: NodeInterface,
      { key, name }: { key: string; name: string }
    ) => {
      console.log("mention click:", key, "-", name);
    },
    onMouseEnter: (
      layout: NodeInterface,
      { name }: { key: string; name: string }
    ) => {
      const vm = createApp(MentionPopover, {
        name,
      });
      vm.mount(layout.get<HTMLElement>()!);
    },
  },
  [MarkRange.pluginName]: {
    //标记类型集合
    keys: ["mark"],
    //标记数据更新后触发
    onChange: (
      addIds: { [key: string]: Array<string> },
      removeIds: { [key: string]: Array<string> }
    ) => {
      // 新增的标记
      const commentAddIds = addIds["comment"] || [];
      // 删除的标记
      const commentRemoveIds = removeIds["comment"] || [];
    },
    //光标改变时触发
    onSelect: (
      range: RangeInterface,
      selectInfo?: { key: string; id: string }
    ) => {
      const { key, id } = selectInfo || {};
      // 移除预览标记
      engine?.command.executeMethod(
        "mark-range",
        "action",
        "comment",
        "revoke"
      );
      if (key === "mark" && id) {
        engine?.command.executeMethod(
          "mark-range",
          "action",
          key,
          "preview",
          id
        );
      }
    },
  },
  [Heading.pluginName]:{
    showAnchor:false
  },
  [Fontsize.pluginName]: {
    //配置粘贴后需要过滤的字体大小
    filter: (fontSize: string) => {
      return (
        [
          "12px",
          "13px",
          "14px",
          "15px",
          "16px",
          "19px",
          "22px",
          "24px",
          "29px",
          "32px",
          "40px",
          "48px",
        ].indexOf(fontSize) > -1
      );
    },
  },
  [Fontfamily.pluginName]: {
    //配置粘贴后需要过滤的字体
    filter: (fontfamily: string) => {
      const item = fontFamilyDefaultData.find((item) =>
        fontfamily
          .split(",")
          .some(
            (name) =>
              item.value
                .toLowerCase()
                .indexOf(name.replace(/"/, "").toLowerCase()) > -1
          )
      );
      return item ? item.value : false;
    },
  },
  [LineHeight.pluginName]: {
    //配置粘贴后需要过滤的行高
    filter: (lineHeight: string) => {
      if (lineHeight === "14px") return "1";
      if (lineHeight === "16px") return "1.15";
      if (lineHeight === "21px") return "1.5";
      if (lineHeight === "28px") return "2";
      if (lineHeight === "35px") return "2.5";
      if (lineHeight === "42px") return "3";
      // 不满足条件就移除掉
      return ["1", "1.15", "1.5", "2", "2.5", "3"].indexOf(lineHeight) > -1;
    },
  },
  // [Table.pluginName]:{
  //   overflow:{
  //     maxLeftWidth: ()=> 0,
  //     maxRightWidth: ()=> 0
  //   }
  // }
}

export const onLoad = (e: EngineInterface) => {
  engine = e;
}